import React, { Component } from 'react';
import { Tools,Icon,SwipeAction,Modal } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';

const alert = Modal.alert;
const getLabel = Tools.getLabel;
@withRouter
export default class PlanItem extends Component {
  render() {
    const {id,name,description,endMonth,endDay,canEdit,canComplete,status,statusSpan,showBottom,cardStore,onItemClick} = this.props;
    let cancelBtn = {
      text: getLabel("91","删除"),
      onPress: () => {                
        alert('',getLabel('83600','您确认要删除吗？'),[
          { text: getLabel('201','取消'), onPress: () => {} },
          { text: getLabel('83446','确定'), onPress: () => {cardStore.deleteWorkPlan(id);}},
        ]);
      },
      style: { backgroundColor: '#d24545', color: 'white' },
    };
    let completeBtn = {
      text: getLabel("555","完成"),
      onPress: () => {
        cardStore.completeWorkPlan(id);
      },
      style: { backgroundColor: '#da8e2c', color: 'white' },
    };
    let btns = [];
    if(status == 0){
      if(canEdit){
        btns.push(completeBtn);
        btns.push(cancelBtn);
      }else{
        if(canComplete){
          btns.push(completeBtn);
        }
      }
    }
    return (
    <div>
        <SwipeAction
          disabled={status == 1 || (!canEdit && !canComplete)}
          autoClose
          right={btns}
        >
        <div className="crm-contacter-item" onClick={()=>{
          onItemClick && onItemClick(id);
        }}>
          <div className="crm-plan-item-left">
            <div className="crm-plan-item-left-title1">{endMonth}</div>
            <div className="crm-plan-item-left-title2">{endDay}</div>
          </div>
          <div className="crm-contacter-item-right">
          <div className="crm-contacter-item-title" onClick={()=>{
              this.props.onContacterClick && this.props.onContacterClick(id);
          }}>{name}</div>
          <div className="crm-contacter-item-bottom">
              <div className="crm-contacter-item-phone">{description}</div>              
              <div className="crm-plan-item-operate">{statusSpan}</div>
          </div>
          </div>
        </div>
        {
            showBottom && (<div className="crm-field-item-bottom"></div>)
        }
        </SwipeAction>
    </div>
    );
  }
}